<template>
	<view class="dc-materialprompt" v-if="materialpromptObj.show" @click.stop="materialpromptObj.show = !materialpromptObj.show">
		<view class="dc-materialprompt-conten" @click.stop="">
			<view class="conten-title">
				司机资料审核升级说明
			</view>
			<view class="conten-info">
				尊敬的用户，请您在{{materialpromptObj.endDate}}前为司机上传《{{ materialpromptObj.popTypeName }}》提交审核，否则将影响司机师傅的资质合规和后续接单。
			</view>
			<view class="conten-detail" @click.stop="goMaterialpromptLook">
				<image src="https://tbb-file.oss-cn-shenzhen.aliyuncs.com/tbb_admin_app/icon/conten-detail.png" mode="aspectFill"></image>如何开具《{{ materialpromptObj.popTypeName }}》
			</view>
			<view class="go-materialprompt-btn" @click.stop="goMaterialprompt">
				我已知晓
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters, mapMutations } from 'vuex'
	import { getAutoCompanyCert, getPopvehicle } from '@/common/api/user'
	export default {
		data(){
			return {
				materialpromptObj: {
					show: false,
					endDate: '',
					popTypeName: '三年无重大责任事故证明'
				}
			}
		},
		computed:{
			...mapGetters({
				materialpromptShow:'materialpromptShow'
			})
		},
		created() {
			if(this.materialpromptShow) this.getPopdriverFn()
		},
		methods: {
			...mapMutations({
				setMaterialpromptShow:'vehicle/setMaterialpromptShow'
			}),
			goMaterialpromptLook(){
				this.jump('/pages/process/process')
			},
			goMaterialprompt(){
				// this.jump('/pages/driver/driver','switchTab')
				this.materialpromptObj.show = !this.materialpromptObj.show
			},
			// 判断用户证件是否过期
			async getPopdriverFn(){
				let [err,res] = await getPopvehicle()
				if(res.data) {
					// this.setMaterialpromptShow(res.data.data.show)
					this.materialpromptObj = res.data.data
					switch (this.materialpromptObj.popType){
						case 1:
							this.materialpromptObj.popTypeName = '三年无重大责任事故证明'
							break;
						default:
							break;
					}
					this.setMaterialpromptShow(false)
				}
			},
			jump(url,type="navigateTo"){
				if(type == 'navigateTo') {
					uni.navigateTo({
						url:url
					})
				}else if(type == 'switchTab') {
					uni.switchTab({
						url: url
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped="true">
	.dc-materialprompt {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, .5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1000000;
		.dc-materialprompt-conten {
			width: 660rpx;
			background-color: #FFFFFF;
			padding: 60rpx 40rpx;
			border-radius: 18rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			.conten-title {
				flex: 1;
				text-align: center;
				line-height: 36rpx;
				font-size: 36rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000E6;
				line-height: 36rpx;
			}
			.conten-info {
				flex: 1;
				margin-top: 30rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #00000099;
				line-height: 34rpx;
			}
			.conten-detail {
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #E4433A;
				line-height: 34rpx;
				display: flex;
				flex-direction: row;
				margin-top: 30rpx;
				& > image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 12rpx;
				}
			}
			.go-materialprompt-btn {
				width: 580rpx;
				margin-top: 62rpx;
				background: linear-gradient(90deg, #E8C9A2 0%, #D9A96A 100%);
				border-radius: 12rpx;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #865825;
				line-height: 32rpx;
				text-align: center;
				padding: 32rpx 0;
			}
		}
	}
</style>